<template>
  <div>
  <my-header></my-header>
    <div class="infinite-list-wrapper" style="overflow:auto">
      <ul
        class="list"
        v-infinite-scroll="load"
        infinite-scroll-disabled="disabled"

        style="list-style-type: none">
        <li v-for="i in news"  @click="findNewInfo(i.id)" style="text-decoration: none; height: 300px; width: 70% ;border: 1px solid gainsboro; margin-top: 15px" class="list-item">
          <div  style="width: 40%;  margin-left: 1px">
            <el-image
              :src="i.newsCover"
              style=" height: 300px;"
              @click="findImage(i.id)"
              :preview-src-list="i.newsCover">
            </el-image>
          </div>
          <div style="width: 50%; height: 150px; float: right;position: relative; top: -260px;right: 30px">
            <h3 style="line-height: 40px">
              {{i.newsTitle}}
            </h3>
          </div>
          <div style="width: 51%; height: 50px;  float: right;position: relative; top: -220px;right: 30px">

            <i class="el-icon-view" style="position: absolute; left: 150px; top: 15px">{{ i.newsClickNum }}</i>
            <i class="el-icon-success" style="position: absolute; left: 250px; top: 15px">{{ i.newsThumbUp }}</i>
            <i class="el-icon-star-on" style="position: absolute; left: 350px; top: 15px">{{ i.newsCollection }}</i>
          </div>
        </li>
      </ul>
      <p v-if="loading">加载中...</p>
      <p v-if="noMore">没有更多了</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "newsList",
  data(){
    return {
      //消息新闻无限滚动
      news: [],
      loading: false,
      //新闻封面展示
      url:[] ,
      image:[]
    }
  },
  methods:{
    //加载新闻
    load () {
      this.count += 2
      this.loading = true
      setTimeout(() => {

        this.loading = false
      }, 1000)
    },
    findNewsByTypeId(id){
      this.$axios.post('/api/new/findNewsByTypeId/'+id,).then(res=>{
        if (res.data.code==1){
          this.news=res.data.data;
          // this.image.push(res.data.data.newsCover)
        }
      });
    },
    findImage(imageName){
      var index_image = this.news.indexOf(imageName)
      this.image.push(this.news[index_image].newsCover);
    },
    findNewInfo(id){
      this.$router.push({ name: "newsss", params: { id: id } });

    }
  },

  mounted() {
   var id = this.$route.params.id;
  this.findNewsByTypeId(id);
  }
}
</script>

<style scoped>

</style>
